// EInput.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects

Item {
    id: root
    width: 240
    height: 60

    Theme { id: theme }
    FontLoader {
        id: iconFont
        source: "qrc:/assets/fontawesome-free-6.7.2-desktop/otfs/Font Awesome 6 Free-Solid-900.otf"
    }

    // === 接口属性 & 信号 ===
    property alias text: textField.text
    property alias placeholderText: textField.placeholderText
    property bool readOnly: false
    property bool passwordField: false
    property bool passwordVisible: false
    signal accepted()  // 输入回车触发

    // === 样式属性 ===
    property int fontSize: 24
    property real radius: 20
    property color backgroundColor: "#FFFFFF"
    property color textColor: "#333333"
    property color placeholderColor: "#7A8CA5"
    property string backgroundImageSource: ""
    property string showPasswordSymbol: "👁"
    property string hidePasswordSymbol: "🙈"
    // 左侧图标
    property string iconCharacter: ""
    property color iconColor: "#2090CD"
    property string iconFontFamily: iconFont.name

    // === 状态属性 ===
    property bool enabled: true
    property bool backgroundVisible: true  // 背景显示控制

    // === 背景与阴影 ===
    MultiEffect {
        source: background
        anchors.fill: background
        shadowEnabled: true
        shadowColor: "#FFFFFF"
        shadowBlur: 10
        shadowHorizontalOffset: -4
        shadowVerticalOffset: -4
    }
    MultiEffect {
        source: background
        anchors.fill: background
        shadowEnabled: true
        shadowColor: theme.shadowColor
        shadowBlur: 12
        shadowHorizontalOffset: 6
        shadowVerticalOffset: 6
    }

    Rectangle {
        id: background
        anchors.fill: parent
        radius: root.radius
        border.width: 0
        clip: true
        color: root.backgroundVisible ? (root.backgroundImageSource !== "" ? "transparent" : root.backgroundColor) : "transparent"
        opacity: root.enabled ? 1.0 : 0.6

        Image {
            id: bgImage
            anchors.fill: parent
            source: root.backgroundImageSource
            visible: source !== ""
            fillMode: Image.Stretch
        }
    }

    // === 内容布局 ===
    RowLayout {
        id: layout
        anchors.fill: parent
        anchors.margins: 8
        spacing: 12

        // 左侧图标
        Text {
            id: leftIcon
            visible: root.iconCharacter !== ""
            text: root.iconCharacter
            color: root.iconColor
            font.pixelSize: root.fontSize + 6
            font.family: root.iconFontFamily
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            Layout.alignment: Qt.AlignVCenter
            Layout.preferredWidth: leftIcon.implicitWidth
        }

        // === 输入框主体 ===
        TextField {
            id: textField
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignVCenter

            font.pixelSize: root.fontSize
            color: root.textColor
            placeholderTextColor: root.placeholderColor
            readOnly: root.readOnly
            enabled: root.enabled
            verticalAlignment: Text.AlignVCenter
            echoMode: root.passwordField
                      ? (root.passwordVisible ? TextInput.Normal : TextInput.Password)
                      : TextInput.Normal
            background: null
            onAccepted: root.accepted()
        }

        // === 密码显示切换按钮 ===
        Text {
            id: eyeToggle
            visible: root.passwordField
            text: root.passwordVisible ? root.hidePasswordSymbol : root.showPasswordSymbol
            color: "#7A8CA5"
            font.pixelSize: root.fontSize
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            MouseArea {
                anchors.fill: parent
                enabled: root.enabled
                cursorShape: Qt.PointingHandCursor
                onClicked: root.passwordVisible = !root.passwordVisible
            }
        }
    }
}
